<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>日程安排</title>
        <link rel="stylesheet" href="../css/bootstrap.css">
		<script src="../js/jquery-3.3.1.js"></script>
		<script src="../js/bootstrap.js"></script>

    </head>

    <body>
        <div>
			<a href="" style="margin-left: 1250px;" class="sub-add btn btn-info" data-toggle="modal" data-target="#add-modal">添加</a>
		</div>
        <table class="table table-hover">
            <thead>
              <tr>
                <th scope="col">#</th>
                <th scope="col">时间</th>
                <th scope="col">任务</th>
                <th scope="col">编辑</th>
              </tr>
            </thead>
            <tbody id="schedule">

			</tbody>
			<!--添加-->
			<div class="modal fade" id="add-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
					  <h6 class="modal-title" id="exampleModalLabel">添加日程</h6>
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					  </button>
					</div>
					<div class="modal-body">
					  <form id="form-add">
							<div class="form-group row">
								<label for="input-ftype" class="col-sm-3 col-form-label">编号</label>
								<div class="col-sm-9">
								<input name="ftype" type="text" class="form-control" id="input-ftype">
								</div>
							</div>

							<div class="form-group row">
							<label for="input-taskName" class="col-sm-3 col-form-label">日程安排</label>
							<div class="col-sm-9">
								<input name="taskName" type="text" class="form-control" id="input-name">
							</div>
							</div>
							<div class="form-group row">
							<label for="input-ftype" class="col-sm-3 col-form-label">任务名称</label>
							<div class="col-sm-9">
								<input name="ftype" type="text" class="form-control" id="input-ftype">
							</div>
							</div>

						</form>
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					  <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="addData()">确定</button>
					</div>
				  </div>
				</div>
			  </div>
			<!-- 修改模态框 -->
			<div class="modal fade" id="modify-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
					  <h6 class="modal-title" id="exampleModalLabel">修改日程安排</h6>
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					  </button>
					</div>
					<div class="modal-body">
					  <form id="form-modify">
						  
						  <div class="form-group row">
							<label for="input-fid" class="col-sm-3 col-form-label">事务编号</label>
							<div class="col-sm-9">
							  <input name="id"  type="number" class="form-control" id="input-id">
							</div>
						  </div>

						  <div class="form-group row">
							<label for="input-ftype" class="col-sm-3 col-form-label">时间</label>
							<div class="col-sm-9">
							  <input name="ftype" type="text" class="form-control" id="input-ftype">
							</div>
						  </div>
						  
						<div class="form-group row">
						  <label for="input-taskName" class="col-sm-3 col-form-label">任务名称</label>
						  <div class="col-sm-9">
							<input name="name"  type="text" class="form-control" id="input-name">
						  </div>
						</div>

					  </form>
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					  <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="modifyData()">确定</button>
					</div>
				  </div>
				</div>
			  </div>
			  
			  
			  <!-- 删除模态框 -->
			  <div class="modal fade" id="delete-modal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
				<div class="modal-dialog">
				  <div class="modal-content">
					<div class="modal-header">
					  <h6 class="modal-title" id="exampleModalLabel">温馨提示：</h6>
					  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
						<span aria-hidden="true">&times;</span>
					  </button>
					</div>
					<div class="modal-body">
					<h6>是否删除id为:<span id="span-id"></span>的数据</h6>
					</div>
					<div class="modal-footer">
					  <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
					  <button type="button" class="btn btn-primary" data-dismiss="modal" onclick="deleteData($('#span-id').text())">确定</button>
					</div>
				  </div>
				</div>
			  </div>
            
          </table>
          <nav aria-label="Page navigation example" class="page-main">
            <ul class="pagination" id="ul-pages">
              
            </ul>
          </nav>
          <script>
            let baseUrl = "http://localhost:8080/company"

			// -----------------分页数据展示-------------------
			let pageSize = 5;
			getPageInfo(1)
			
			// 获得分页数据, pageNum=第几页，参数2=每页显示数据量
			function getPageInfo(pageNum) {
				$.ajax({
					url: baseUrl + "/schedule",
					type: "post", //默认get
					dataType: "json",
					data: `pageNum=${pageNum}&pageSize=${pageSize}`,
					success: function(data){
						console.log(data)
						if(data.code == 200) {
							// 动态渲染画面
							showSchedules(data.pageInfo)
							// 动态渲染分页按钮
							showPages(pageNum, data.pageInfo.pages)
						}
					}
				})
			}
			
			// 动态渲染页面
			function showSchedules(pageInfo) {
				console.log(pageInfo)
				
				// 清空父容器
				$('#schedule').empty()
				
				// 对数据循环
				$(pageInfo.list).each(function(index, schedule) {
					// 根据数据，动态创建一行表格
					let trSchedule = $(`
						<tr>
							<td>${schedule.id}</td>
							<td>${schedule.workTime}</td>
							<td>${schedule.taskName}</td>
							<td>
								<button type="button" class="btn btn-primary" data-toggle="modal" 
									data-id="${schedule.id}" data-target="#delete-modal">
								删除
								</button>
								<button type="button" class="btn btn-primary" data-toggle="modal"
									data-target="${schedule.id}" data-target="delete-modal">
								编辑
								</button>
							</td>
						</tr>				
					`)
					// 将表格放入父容器
					$('#schedule').append(trSchedule)
				})				
			}	
			
			// ---------------- 动态分页 ------------------------
			function showPages(pageNum, pages) {
				// 清空父容器
				$('#ul-pages').empty()
				
				let sy = $(`
					<li class="page-item ${1 == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Previous" 
							onclick = "getPageInfo(1)">
						<span aria-hidden="true">&laquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(sy)
				
				for (var i = 0; i < pages; i++) { 
					let pageStr = `
						<li class="page-item  ${i+1 == pageNum ? 'active' : ''} ">
							<a  
								class="page-link"
								href="javascript:;"
							    onclick = "getPageInfo(${i+1})">${i+1}
							</a>
						</li>
					`
					let page = $(pageStr)
					$('#ul-pages').append(page)
				}
				
				// getPageInfo
				let wy = $(`
					<li class="page-item ${pages == pageNum ? 'disabled' : ''}">
					  <a class="page-link" href="javascript:;" aria-label="Next"
							onclick = "getPageInfo(${pages})">
					    <span aria-hidden="true">&raquo;</span>
					  </a>
					</li>
				`)
				$('#ul-pages').append(wy)
				
			}

			// ----------- 删除数据---------------
			$('#delete-modal').on('show.bs.modal', function (event) {
				var button = $(event.relatedTarget) 
				var id = button.data('id')
				console.log(id)
				var modal = $(this)
				modal.find('#span-id').text(id)
			})

			function deleteData(id) {
				$.ajax({
					url: baseUrl + "/schedule/delete",
					type: "delete",
					dataType: "json",
					data: "id="+id,
					success: function(data){
						if(data.code == 200) {
							// 刷新画面
							getPageInfo(1)
						}
					}
				})
			}
	
			
			// -------------- 添加 --------------
			function addData() {
				console.log('添加部门....')
				let de = $('#form-add').serialize()
				console.log(de)
				$.ajax({
					url: baseUrl + "/schedule/add",
					type: "post",
					dataType: "json",
					data: de,
					success: function(data) {
						if(data.code == 200) {
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
						
			// -------------- 修改 --------------
			function modifyData() {
				let modifyde = $('#form-modify').serialize()
				console.log(modifyde)
				$.ajax({
					url: baseUrl + "/schedule/modify",
					type: "post",
					dataType: "json",
					data: modifyde,
					success: function(data) {
						if(data.code == 200) {
							// 添加成功，刷新画面
							getPageInfo(1)
						}
					}
				})
			}
          </script>
    </body>
</html>